<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.SIDENAV.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-sidenav</h3>
        <p>{{'COMPONENT.SIDENAV' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>visible</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>direction</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>overlay</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>style</free-table-cell>
              <free-table-cell>
                <ng-template><code>Object</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>outside</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>navStyle</free-table-cell>
              <free-table-cell>
                <ng-template><code>object</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>overlayBackground</free-table-cell>
              <free-table-cell>
                <ng-template><code>string</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SIDENAV.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">{{'EVENT' | translate}}</h3>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onChange</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SIDENAV.EVENTS.0'}}<code>&#123;open: true | false&#125;</code>
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">free-sidenav-content</h3>
        <p>{{'DEMO.SIDENAV.ITEMDESCRIPTION.0' | translate}}</p>
      </div>
    </div>

    <div fGrid="6" class="free-demo-board">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;SidenavModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
             <div class="simulation-browser">
               <button fButton (click)="leftSidenav = !leftSidenav">Open Left</button>
               <button fButton (click)="rightSidenav = !rightSidenav">Open Right</button>
               <button fButton (click)="topSidenav = !topSidenav">Open Top</button>
               <button fButton (click)="bottomSidenav = !bottomSidenav">Open Bottom</button>
               <free-sidenav [visible]="leftSidenav">
                 <h3>Left Sidenav</h3>
                 <button fButton (click)="leftSidenav = !leftSidenav">close</button>
               </free-sidenav>
               <free-sidenav [visible]="rightSidenav" [direction]="'right'">
                 <h3>Right Sidenav</h3>
                 <button fButton (click)="rightSidenav = !rightSidenav">close</button>
               </free-sidenav>
               <free-sidenav [visible]="topSidenav" [direction]="'top'">
                 <h3>Right Sidenav</h3>
                 <button fButton (click)="topSidenav = !topSidenav">close</button>
               </free-sidenav>
               <free-sidenav [visible]="bottomSidenav" [direction]="'bottom'">
                 <h3>Right Sidenav</h3>
                 <button fButton (click)="bottomSidenav = !bottomSidenav">close</button>
               </free-sidenav>
             </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;button fButton (click)="leftSidenav = !leftSidenav"&gt;Open Left&lt;/button&gt;
              &lt;button fButton (click)="rightSidenav = !rightSidenav"&gt;Open Right&lt;/button&gt;
              &lt;free-sidenav [visible]="leftSidenav"&gt;
                &lt;h3&gt;Left Sidenav&lt;/h3&gt;
                &lt;button fButton (click)="leftSidenav = !leftSidenav"&gt;close&lt;/button&gt;
              &lt;/free-sidenav&gt;
              &lt;free-sidenav [visible]="rightSidenav" [direction]="'right'"&gt;
                &lt;h3&gt;Right Sidenav&lt;/h3&gt;
                &lt;button fButton (click)="rightSidenav = !rightSidenav"&gt;close&lt;/button&gt;
              &lt;/free-sidenav&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Overlay</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <div class="simulation-browser">
              <button fButton (click)="overlay = !overlay">Open</button>
              <free-sidenav [(visible)]="overlay" [overlay]="true">
                <free-accordion-group>
                  <free-accordion header="Item 1">
                    Item 1 content.
                  </free-accordion>
                  <free-accordion header="Item 2">
                    Item 2 content.
                  </free-accordion>
                  <free-accordion header="Item 3">
                    Item 3 content.
                  </free-accordion>
                </free-accordion-group>
              </free-sidenav>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;button fButton (click)="overlay = !overlay"&gt;Open&lt;/button&gt;
              &lt;free-sidenav [visible]="overlay" [overlay]="true"&gt;
                &lt;h3&gt;Sidenav&lt;/h3&gt;
              &lt;/free-sidenav&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board free-four">
        <h3 class="free-toolbar">Content</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <div class="simulation-browser">
              <free-sidenav [(visible)]="contentVisible" [outside]="true">
                <h3>Sidenav</h3>
                <free-sidenav-content>
                  <button fButton (click)="contentVisible = !contentVisible">Open</button>
                </free-sidenav-content>
              </free-sidenav>
            </div>
            <div class="simulation-browser">
              <free-sidenav [(visible)]="contentRightVisible"
                            [outside]="true" [direction]="'right'">
                <h3>Sidenav</h3>
                <free-sidenav-content>
                  <button style="float:right" fButton
                          (click)="contentRightVisible = !contentRightVisible">Open</button>
                </free-sidenav-content>
              </free-sidenav>
            </div>
            <div class="simulation-browser">
              <free-sidenav [(visible)]="contentTopVisible"
                            [outside]="true" [direction]="'top'">
                <h3>Sidenav</h3>
                <free-sidenav-content>
                  <button fButton
                          (click)="contentTopVisible = !contentTopVisible">Open</button>
                </free-sidenav-content>
              </free-sidenav>
            </div>
            <div class="simulation-browser">
              <free-sidenav [(visible)]="contentBottomVisible"
                            [outside]="true" [direction]="'bottom'">
                <h3>Sidenav</h3>
                <free-sidenav-content>
                  <button fButton
                          (click)="contentBottomVisible = !contentBottomVisible">Open</button>
                </free-sidenav-content>
              </free-sidenav>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-sidenav [(visible)]="contentVisible" [outside]="true"&gt;
                &lt;h3&gt;Sidenav&lt;/h3&gt;
                &lt;free-sidenav-content&gt;
                  &lt;button fButton (click)="overlay = !overlay"&gt;Open&lt;/button&gt;>
                &lt;/free-sidenav-content&gt;
              &lt;/free-sidenav&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>


